<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>农场单选</title>
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <form>
        <legend>今天动物</legend>

        <label>
            <input type="radio" v-model="animal" :value="animals[i]" />{{animals[i]}}
        </label><br />
        <label>
            <input type="radio" v-model="animal" :value="animals[i+1]" />{{animals[i+1]}}
        </label>

        <input type="submit" value="提交到农场" @click.prevent="addToFarm" />
    </form>

    <div >
        你的选择：{{farm.join(' ')}}
    </div>
</div>


<script>
    new Vue({
        el: '#app',
        data:{
            animals: ['🐖', '🐓', '🐄'],
            animal: undefined,
            farm: [],
            i: 0
        },
        methods:{
            addToFarm(){
                if(this.animal === undefined){
                    return;
                }
                this.farm.push(this.animal);
                this.i = Math.floor(Math.random() * (this.animals.length - 1))
            }
        }
    })
</script>

</body>
</html>